import React, {FC, useState, useEffect} from 'react'
import {Divider, ImageUploader} from 'antd-mobile'
import {ImageUploadItem} from 'antd-mobile/es/components/image-uploader'

import imagPic from './index.module.css'

//函数
function ImagSelect() {
    /**
     * useState 后面的参数是初始化值 任意类型
     * setCount 更改属性的方法
     */
    const [fileList, setFileList] = useState()


    //[]空数组相当于componentDidMount
    useEffect(() => {

        //返回的函数相当于unmountComponentAtNode
        return () => {

        }
    }, []);

    function changeItems(imgItem: ImageUploadItem) {
        setFileList(imgItem)
    }

    function picUpload(img: File) {
        return {
            url: URL.createObjectURL(img), reality: img,
        }
    }

    return (<div className={imagPic.container} style={{fontSize: '14px'}}>
        <span>问题图片:</span>
        <ImageUploader className={imagPic.imagePic}
                       accept={'image/jpeg,image/jpg'}
                       maxCount={4}
                       columns={4}
                       upload={picUpload}
                       onChange={changeItems}
                       value={fileList}
        />
        <Divider></Divider>
    </div>)
}


export default ImagSelect

